<template>
    <div class="large-talent">
        <a-table :loading="loading" :rowKey="(item,i)=>item.phone+'_'+i" :columns="columns" :data-source="pageData" :pagination="false">

        </a-table>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { h } from "vue";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    loading = false;
    columns = [
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "姓名",
            width: 100,
        },
        {
            align: "center",
            dataIndex: "placeCollege",
            key: "placeCollege",
            title: "所属院校",
            width: 100,
            customRender: (text: string, record: any, index: number) => {
                let str = "";
                try {
                    str = record.placeCollege ? JSON.parse(record.placeCollege).join(",") : "";
                } catch (error) {
                    str = record.placeCollege;
                }
                const dom = h("div", { class: "text-nowarp placeCollegeDiv" }, str || "--");
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "territory",
            key: "territory",
            title: "领域",
            width: 100,
            customRender: (text: string, record: any, index: number) => {
                const dom = h("div", { class: "text-nowarp placeCollegeDiv" }, record.territory || "--");
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "phone",
            key: "phone",
            title: "联系方式",
            width: 100,
            customRender: (text: string, record: any, index: number) => {
                const dom = h("div", { class: "text-nowarp placeCollegeDiv" }, record.phone || "--");
                return dom;
            },
        },
    ];
}
</script>
<style lang="scss">
.large-talent {
    min-height: 20vh;
    max-height: 25vh;
    margin-top: 5px;
    overflow-y: auto;
    .ant-table-thead tr th,
    .ant-table-tbody tr td {
        padding: 4px 2px;
        font-size: 14px;
        border-bottom: unset;
    }
    .ant-table-thead tr th {
        background-color: rgba(6, 75, 115, 1);
        color: rgba(68, 187, 255, 1);
    }
    .ant-table-tbody tr td {
        color: #fff;
        text-shadow: 0px 0px 4px rgba(255, 116, 76, 0.4);
        border-right: solid 1px rgba(255, 255, 255, 0.1);
    }
    .ant-table-tbody tr td:last-child {
        border-right: unset;
    }
    .ant-table-row:nth-child(2n-1) {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .placeCollegeDiv {
        width: 100px;
    }
    .ant-table-placeholder {
        background-color: transparent;
        border-top: unset;
        border-bottom: unset;
    }
    .ant-empty-normal {
        color: rgb(68, 187, 255);
    }
}
</style>
